<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑用户"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120"
    >
      <el-row>
        <el-col :span="12"
          ><el-form-item label="用户名" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="会员等级" prop="grade">
            <el-select v-model="ruleForm.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          ><el-form-item label="邮箱" prop="email">
            <el-input
              v-model="ruleForm.email"
              placeholder="请输入"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="会员有效期" prop="effectiveTime">
            <el-date-picker
              v-model="ruleForm.effectiveTime"
              type="date"
              placeholder="请选择"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          ><el-form-item label="手机号" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              placeholder="请输入"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="帐号状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          ><el-form-item label="紧急联系人" required>
            <el-form-item
              label=""
              prop="contactsName"
              style="width: 30%; margin-right: 10px"
            >
              <el-input v-model="ruleForm.contactsName" placeholder="姓名" />
            </el-form-item>
            <el-form-item
              label=""
              prop="relationship"
              style="width: 30%; margin-right: 10px"
            >
              <el-select v-model="ruleForm.relationship" placeholder="关系">
                <el-option
                  v-for="item in relationshipOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label=""
              prop="contactsPhone"
              style="width: 30%; margin-right: 10px"
            >
              <el-input v-model="ruleForm.contactsPhone" placeholder="手机号" />
            </el-form-item> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="备注信息">
            <el-input
              v-model="ruleForm.remark"
              placeholder="请输入"
              type="textarea"
              autosize
            /> </el-form-item
        ></el-col>
      </el-row>

      <el-row>
        <el-col style="display: flex; justify-content: right">
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              确定
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
interface RuleForm {
  name: string;
  grade: string;
  email: string;
  effectiveTime: string;
  phone: string;
  status: string;
  contactsName: string;
  relationship: string;
  contactsPhone: string;
  remark: string;
}
const props = defineProps(["open"]);
const status: any = reactive(props);
// eslint-disable-next-line vue/no-dupe-keys
const { open } = toRefs(status);
// 返回参数方法
const emits = defineEmits("editChange");
// 控制显示隐藏
const dialogVisible = ref<boolean>(false);
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  emits("editChange", dialogVisible.value);
};
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  grade: "",
  email: "",
  effectiveTime: "",
  phone: "",
  status: "",
  contactsName: "",
  relationship: "",
  contactsPhone: "",
  remark: ""
});
// 会员等级
const gradeOptions = reactive<any>([
  {
    value: "1",
    label: "普通会员"
  },
  {
    value: "2",
    label: "黄金会员"
  },
  {
    value: "3",
    label: "钻石会员"
  }
]);
// 账号状态
const statusOptions = reactive<any>([
  {
    value: "1",
    label: "正常"
  },
  {
    value: "2",
    label: "禁用"
  }
]);
// 关系
const relationshipOptions = reactive<any>([
  {
    value: "1",
    label: "配偶"
  },
  {
    value: "2",
    label: "父母"
  },
  {
    value: "3",
    label: "子女"
  },
  {
    value: "4",
    label: "其他"
  }
]);
// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    {
      required: true,
      message: "请输入用户名",
      trigger: ["blur", "change"]
    }
  ],
  grade: [
    {
      required: true,
      message: "请选择会员等级",
      trigger: ["blur", "change"]
    }
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: ["blur", "change"]
    },
    {
      pattern:
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      message: "请输入正确的邮箱",
      trigger: ["blur", "change"]
    }
  ],
  effectiveTime: [
    {
      required: true,
      message: "请选择会员有效期",
      trigger: ["blur", "change"]
    }
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["blur", "change"]
    },
    {
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"]
    }
  ],
  status: [
    {
      required: true,
      message: "请选择账号状态",
      trigger: ["blur", "change"]
    }
  ],
  contactsName: [
    {
      required: true,
      message: "请输入紧急联系人姓名",
      trigger: ["blur", "change"]
    }
  ],
  relationship: [
    {
      required: true,
      message: "请选择紧急联系人关系",
      trigger: ["blur", "change"]
    }
  ],
  contactsPhone: [
    {
      required: true,
      message: "请输入紧急联系人手机号",
      trigger: ["blur", "change"]
    },
    {
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"]
    }
  ]
});
// 确定
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleClose();
};

onMounted(() => {
  dialogVisible.value = open;
});
</script>
